<template>
	<view>
		<!-- banner -->
		<view class="content" style="padding-top: 0;">
			<view class="contentFlex">


				<view class="swiper">
					<u-swiper :list="list1" @change="change" @click="click" :autoplay="true" height="400rpx" radius='0'>
					</u-swiper>
				</view>
				<!--header  -->
				<view class="headerContent">
					<view class="headerContentLeft">
						<image :src="userDetail.avatarUrl" mode=""></image>
						<view class="headerInformation">
							<view class="headerInformationLeft">
								<view class="headerInformationLeftName">{{userDetail.nickName||''}}

								</view>

								<view class="headerInformationLeftBottom">
									<text>{{userDetail.fans_count||0}}关注</text>
									<text>{{userDetail.attention_count||0}}粉丝</text>
								</view>
							</view>
							<view class="headerInformationRight">
								<image src="https://www.atuanjian.com/appletStatic/static/fenxiang.png" mode=""></image><text>分享</text>
								<button open-type="contactShare"></button>
							</view>
						</view>
					</view>
					<view class="headerContentRight" @click="collectUserS">
						<image src="https://www.atuanjian.com/appletStatic/static/yh01.png" v-if="userDetail.is_attention==0" mode=""></image>
						<view class="">
							{{userDetail.is_attention==0?'关注':'取关'}}
						</view>
					</view>
				</view>
				<view class="nav">
					<text :class="{active:navBarIndex==index}" v-for="(item,index) in newsMain" :key="index"
						@click="activeClick(index)">{{item.title}}</text>
				</view>
			</view>
			<!-- 内容 -->
			<view class="contentFatherList">
				<view class="ul" v-if="navBarIndex==0">
					<view class="li liitem" v-for="(item,index) in newsMain[navBarIndex].new" :key="index">
						<view class="left_data">
							{{item.created_at.split(' ')[0].split('-')[1]}}/{{item.created_at.split(' ')[0].split('-')[2]}}
						</view>
						<view class="img_list">
							<block v-if="item.img_arr">
								<image v-for="(item2,index2) in JSON.parse(item.img_arr).slice(0,4)" :key="index2"
									:src="showImg+item2" mode="aspectFill"></image>
							</block>

						</view>
						<view class="right_info">
							<view class="message">{{item.content||''}}</view>
							<view class="totalNum">共{{item.img_arr?JSON.parse(item.img_arr).length:0}}张</view>
						</view>
					</view>
					<block v-if="newsMain[0].new.length==0">
						<u-empty mode="data" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</block>
				</view>

				<view class="ul" v-if="navBarIndex==1">
					<block v-if="newsMain[1].new.length>0">
						<view class="li" v-for="(item,index) in newsMain[navBarIndex].new" :key="index">
							<view class="left">
								<image src='https://www.atuanjian.com/appletStatic/static/t1.png' mode=""></image>
							</view>
							<view class="right">
								<view class="rightTopTitle">
									{{item.title}}
								</view>
								<view class="rightTextType">
									<text v-if="item.type1==0">团队融合</text>
									<text v-if="item.type2==0">领导力</text>
								</view>
								<view class="rightTextTime">
									<text>{{item.timeDaty}}天</text>
									<text>{{item.num}}人</text>
									<text v-if="item.nationwide==0">全国</text>
								</view>
								<view class="statusType" v-if="item.statusType==0">
									实时报价
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<u-empty mode="data" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dynamic,
		getDynamicUserInfo,
		collectUser
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				list1: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png' 
				],
				navBarIndex: 0,
				newsMain: [{
					title: '动态',
					new: []
				}, {
					title: '活动',
					new: []
				}],
				showImg: '',
				user_id: '',
				userInfo: null,
				pages: 0,
				totalPage: 0,
				userDetail: {
					attention_count: '',
					avatarUrl: '',
					fans_count: '',
					is_attention: '',
					nickName: '',
					user_id: ''
				}
			}
		},
		methods: {
			activeClick(index) {
				if (this.navBarIndex != index) {
					this.navBarIndex = index
					if (index == 0) {
						this.pages = 0
						this.newsMain[0].new = []
						this.getList()
					}
				}
			},
			async dynamic(data) {
				return await dynamic(data)
			},
			async getDynamicUserInfo(data) {
				return await getDynamicUserInfo(data)
			},

			async collectUser(data) {
				return await collectUser(data)
			},

			getList() {
				let params = {
					token: this.userInfo.token,
					type: '3',
					p: this.pages,
					n: 50,
					d_user_id: this.user_id
				}
				this.dynamic(params).then(res => {
					console.log(res)
					this.newsMain[0].new.push(...res.list)
					this.totalPage = Math.ceil(res.count / 50)
				}).catch(err => {
					console.log(err)
				})
			},
			getInfo() {
				let params = {
					token: this.userInfo.token,
					d_user_id: this.user_id
				}
				this.getDynamicUserInfo(params).then(res => {
					console.log(res)
					this.userDetail = {
						...res
					}
				}).catch(err => {
					console.log(err)
				})
			},

			collectUserS() {
				if (!uni.getStorageSync('userInfo')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return;
				}
				let val = ''
				if (this.userDetail.is_attention == 0) {
					val = 1
				} else {
					val = 0
				}
				let data = {
					token: this.userInfo.token,
					d_user_id: this.user_id,
					attention_status: val
				}
				this.collectUser(data).then(res => {
					if (val == '1') {
						this.userDetail.is_attention = 1
						uni.showToast({
							title: '已关注',
							icon: "none"
						})
					}
					if (val == '0') {
						this.userDetail.is_attention = 0
						uni.showToast({
							title: '已取关',
							icon: "none"
						})
					}
				})
			}
		},
		onLoad(option) {
			this.showImg = this.$config.showImgApi;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}')
			this.user_id = option.id
			this.getList()
			this.getInfo()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.headerContent {
		width: 85%;
		display: flex;
		margin: 0 auto;
		margin-top: -70rpx;
		padding: 25rpx 20rpx;
		justify-content: space-between;
		background-color: #ffffff;
		position: relative;
		z-index: 6;
		border-radius: 10rpx;

		view {
			width: 100%;
		}

		.headerInformation,
		.headerInformationRight {
			display: flex;
		}

		.headerContentLeft {
			display: flex;

			image {
				width: 100rpx;
				height: 100rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
				border-radius: 100%;
			}
		}

		.headerInformationRight {
			font-size: 20rpx;
			width: 110rpx;
			height: 30rpx;
			padding: 6rpx 8rpx;
			margin-top: 10rpx;
			border-radius: 5rpx;
			color: #fff;
			background-color: #D42B24;
			position: relative;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			button {
				width: 100%;
				height: 100%;
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 11;
			}
		}

		.headerContentRight {
			width: 150rpx;
			margin-left: 20rpx;
			text-align: center;
			font-size: 26rpx;
			color: #999;

			image {
				width: 50rpx;
				height: 50rpx;
				margin: 0 auto;
				margin-top: -10rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.headerInformationLeftName {
		font-size: 30rpx;
		font-weight: bold;
		margin: 10rpx 0 8rpx;
	}

	.headerInformationLeftBottom {
		font-size: 26rpx;
		color: #999;
	}

	.headerInformationLeftBottom>text:nth-child(1) {
		margin-right: 30rpx;
	}

	.contentFlex {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background-color: #f5f5f5;
	}

	.contentFatherList {
		margin-top: 610rpx;
		width: 100%;
		background-color: #fff
	}

	.nav {
		@include flex_style(flex-start, center, row nowrap);
		background-color: #ffffff;
		margin-top: 20rpx;
		justify-content: space-around;

		text {
			width: 50%;
			text-align: center;
			line-height: 72rpx;
			font-size: 28rpx;
			font-family: 苹方-简;
			font-weight: normal;
			color: #666666;
			position: relative;
		}

		.active {
			color: #C56557;
			font-weight: bold;
		}

		.active::after {
			content: '';
			position: relative;
			left: calc(50% - 20rpx);
			display: block;
			width: 40rpx;
			height: 4rpx;
			background: #C56557;
		}
	}

	.ul {
		.li {
			display: flex;
			text-align: left;
			position: relative;
			padding: 30rpx 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			padding-top: 30rpx;

			.left {
				width: 38%;

				image {
					width: 100%;
					flex-shrink: 0;
					height: 200rpx;
					margin: 0 auto;

				}

				margin-right: 4%;
			}


		}

		.right {
			width: 58%;
		}

		.rightTopTitle {
			font-size: 30rpx;
			color: #333333;
			white-space: nowrap;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.rightTextType {
			font-size: 26rpx;
			margin: 15rpx 0;

			text {
				display: inline-block;
				vertical-align: middle;
				color: #D42B24;
				margin-right: 20rpx;
				font-weight: 600;
				padding: 0 4rpx;
				padding-bottom: 2rpx;
				border-radius: 5rpx;
				border: 2rpx solid #D42B24;
			}
		}

		.rightTextTime {
			font-size: 24rpx;
			color: #666;

			text {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.statusType {
			font-size: 30rpx;
			color: #D42B24;
			margin-top: 15rpx;
			font-weight: 550;
		}
	}

	.rightTextTime>text:nth-child(1) {
		width: 20%;
		text-align: left;
		border-right: 2rpx solid #666;
	}

	.rightTextTime>text:nth-child(2) {
		width: 33.33%;
		text-align: center;
	}

	.liitem {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;

		.left_data {
			width: 90rpx;
			margin-right: 14rpx;
		}

		.img_list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-flow: row wrap;
			margin-right: 10rpx;

			image {
				width: 130rpx;
				height: 130rpx;
				margin: 0 10rpx 10rpx 0;
			}

			image:nth-child(2n) {
				margin-right: 0;
			}
		}

		.right_info {
			width: 625rpx;
			height: 260rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-direction: column;

			.message {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}

	}
</style>